<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .banner {
            position: relative;
            width: 900px;
            height: 500px;
            margin: 100px auto;
            /* border: 1px solid red; */
            overflow: hidden;
            /* display: flex; */
        }

        .banner .left {
            position: absolute;
            top: 30%;
            left: 0;
            height: 180px;
            width: 60px;
            background: rgba(33, 33, 33, .6);
            color: #eee;
            line-height: 180px;
            vertical-align: middle;
            text-align: center;
            opacity: .5;
            display: none;
            /* background: rgba(33, 33, 33, .6); */
        }

        .banner .right {
            position: absolute;
            top: 30%;
            right: 0;
            height: 180px;
            width: 60px;
            background: rgba(33, 33, 33, .6);
            color: #eee;
            line-height: 180px;
            vertical-align: middle;
            text-align: center;
            opacity: .5;
            display: none;
        }

        .left:hover {

            background: linear-gradient(90deg, rgba(255, 255, 255, .8), transparent);
        }

        .right:hover {

            background: linear-gradient(-90deg, rgba(255, 255, 255, .8), transparent);
        }

        .banner ul li img {
            width: 900px;
            height: 500px;
        }

        .banner .ul1 {
            position: absolute;
            display: flex;
            height: 500px;
            /* left: -1800px; */
            transition: all 0.5s linear;
        }

        .ul2 {
            position: absolute;
            bottom: 30px;
            left: 40%;
            display: flex;
            flex-direction: row;
        }

        .ul2 li {
            margin: 10px;
            background-color: rgb(37, 32, 32);
            opacity: .5;
            width: 40px;
            height: 15px;
            border-radius: 20%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="ul1"></ul>
        <div class="left">
            &lt; </div>
        <div class="right">&gt;</div>
        <ul class="ul2">

        </ul>
    </div>
    <script>
        // 获取轮播图的banner
        let banner = document.querySelector('.banner');
        let picList = banner.querySelector('.ul1');
        let leftBox = document.querySelector('.left');
        let rightBox = document.querySelector('.right');
        let ul2 = document.querySelector('.ul2')

        // let picPosition = [0, -900, -1800];
        banner.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
        // 渲染轮播图 图片和导航
        for (let i = 0; i < 3; i++) {
            ol.style.width = imgs.length * 900 +'px';//每次添加图片会改变o1的橫向
            banner.querySelector('.ul1').innerHTML += `<li><img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t${i + 1}.png" alt=""></li>`;
            ul2.innerHTML +=` <li></li>`;
        }
        let imgWidth =document.querySelector('img').clientWidth;
        // console.log('======',img);
        let lis = document.querySelectorAll('.ul2 > li');
        lis[0].style.opacity = 1;
        //定时执行轮播
        let timer = setInterval(function () {
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.opacity = 0.6;
            }
            if (index != 2) {
                lis[index + 1].style.opacity = 1;
            } else {
                lis[0].style.opacity = 1;
            }
            index++;
            if (index == 3) {
                index = 0;
            }
            picList.style.translate = -imgWidth * index + 'px';
        }, 3000)

        // 鼠标移入显示箭头移出则消失
        banner.addEventListener('mouseenter', function () {
            // 鼠标移入消除定时器
            clearInterval(timer);
            leftBox.style.display = 'block';
            rightBox.style.display = 'block';
        })
        banner.addEventListener('mouseleave', function () {
            // 鼠标移出添加定时器
            timer = setInterval(function () {
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.opacity = 0.6;

                }
                if (index != 2) {
                    lis[index + 1].style.opacity = 1;
                } else {
                    lis[0].style.opacity = 1;
                }
                index++;
                if (index == 3) {
                    index = 0;
                }
                picList.style.translate = -imgWidth * index + 'px';
            }, 3000)
            leftBox.style.display = 'none';
            rightBox.style.display = 'none';
        })

        let index = 0;//创建一个索引 判断轮播图当前所处位置
        // 给箭头添加点击事件
        leftBox.addEventListener('click', function () { //显示上一张图
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.opacity = 0.6;
            }
            if (index != 0) {
                lis[index - 1].style.opacity = 1;
            } else {
                lis[2].style.opacity = 1;
            }
            index--;
            if (index < 0) { //到第一张图的时候返回最后一张
                index = 2;
            }
            picList.style.translate = -imgWidth * index + 'px';

        })
        rightBox.addEventListener('click', function () {  //显示下一张图
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.opacity = 0.6;
            }
            if (index != 2) {
                lis[index + 1].style.opacity = 1;
            } else {
                lis[0].style.opacity = 1;
            }

            index++;
            if (index == 3) { //到第三张图的时候返回第一张
                index = 0;
            }
            picList.style.translate = -imgWidth * index + 'px';
            // lis[index-1].style.opcity = '1';
        })
        // 动态给导航按钮添加点击事件 点击第i个按钮跳转到第i个图片 将索引index也改成i
        for (let j = 0; j < lis.length; j++) {
            lis[j].addEventListener('click', function () {
                index = j;
                picList.style.translate = `${-imgWidth * j}px`;
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.opacity = 0.6;
                }
                this.style.opacity = 1;
            })
        }

    </script>
</body>

</html>